<template>
  <div class="uni-hls-video">
    <el-dialog
      :title="title"
      :fullscreen="true"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <HlsVideo v-if="visible" ref="hlsVideo"/>
    </el-dialog>
  </div>
</template>

<script>
  import HlsVideo from '@/components/video/HlsPlayer.vue'
  export default {
    name: 'LoraHlsVideo',
    components: {
    },
    data() {
      return {
        title: '监控视频',
        visible: false
      }
    },
    components: {
      HlsVideo
    },
    methods: {
      play(title, url) {
        this.title = title
        this.visible = true
        this.$nextTick(()=>{
          this.$refs.hlsVideo.play(url)
        })
      }
    }
  }
</script>
<style>
  .uni-hls-video .el-dialog__body {
    height: 100%;
    position: relative;
    padding: 0;
    overflow: hidden;
  }
</style>
